<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易分页器</title>
    <style type="text/css">
        body {
        font-family: "Segoe UI";
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }
    
    #app {
      width: 600px;
      margin: 30px auto;
    }
    .pagination {
        position: relative;
    }

    .pagination li {
        display: inline-block;
        margin: 0 5px;
    }

    .pagination li a {
        padding: .5rem 1rem;
        display: inline-block;
        border: 1px solid #ddd;
        background: #fff;

        color: #0E90D2;
    }

    .pagination li a:hover {
        background: #eee;
    }

    .pagination li.active a {
        background: #0E90D2;
        color: #fff;
    }
    </style>
</head>

<body>
    <div id="app">
        <!-- 调用组件 -->
        <page></page>
    </div>
    <!-- 组件模板 -->
    <template id="page">
        <ul class="pagination">
            <li v-show="current != 1" @click="current-- && goto(current)"><a href="#">上一页</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
                <a href="#">{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#">下一页</a></li>
        </ul>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
          var vm = new Vue({
        el: '#app',
        components: {
            "page": {
                template: "#page",
                data: function () {
                    return {
                        current: 1,
                        showItem: 5,
                        allpage: 15
                    }
                },
                // 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
                computed: {
                    pages: function () {
                        var pag = [];
                        if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                            //总页数和要显示的条数那个大就显示多少条
                            var i = Math.min(this.showItem, this.allpage);
                            while (i) {
                                pag.unshift(i--);
                            }
                        } else { //当前页数大于显示页数了
                            // 对一个数进行下舍入
                            var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
                                i = this.showItem;
                            if (middle > (this.allpage - this.showItem)) {
                                middle = (this.allpage - this.showItem) + 1
                            }
                            while (i--) {
                                pag.push(middle++);
                            }
                        }
                        return pag
                    }
                },
                methods: {
                    goto: function (index) {
                        if (index == this.current) return;
                        this.current = index;
                        //这里可以发送ajax请求
                    }
                }
            }
        }
    })
</script>
</body>
</html>
